import React from 'react'
import {
    Form,
    Input,
    Button,
    CapsuleTabs
} from 'antd-mobile'
import { Calendar, Cell } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
function index() {
    const nav = useNavigate()
    const cityList = useSelector(store => store.home.cityList)
    console.log(cityList);

    return (
        <div>
            <CapsuleTabs>
                <CapsuleTabs.Tab title='火车' key='fruits'>
                    <Form
                        layout='horizontal'
                        footer={
                            <Button block type='submit' color='primary' size='large'>
                                提交
                            </Button>
                        }
                    >
                        <Form.Item
                            name='start'
                            label='出发地'
                        >
                            <span onClick={() => nav('/city?type=start')}>{cityList.start}</span>
                        </Form.Item>

                        <Form.Item
                            name='end'
                            label='目的地'
                        >
                            <span onClick={() => nav('/city?type=end')}>{cityList.end}</span>
                        </Form.Item>
                        <Form.Item>
                            <Calendar>
                                {(val, actions) => (
                                    <Cell
                                        isLink
                                        title='单个日期'
                                        value={val ? val.toLocaleDateString() : '请选择日期'}
                                        onClick={() => actions.open()}
                                    />
                                )}
                            </Calendar>
                        </Form.Item>
                    </Form>
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='机票' key='vegetables'>
                    机票
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab title='汽车' key='animals'>
                    汽车
                </CapsuleTabs.Tab>
            </CapsuleTabs>

        </div>
    )
}
export default index